<template>
   <Menu ref="leftMenu" theme="dark"  :open-names="openName" :active-name="activeName" width="auto"  @on-select="routerName" @on-open-change="grouping" accordion>
        <Submenu name="1">
        <template slot="title">
            <Icon type="ios-paper"></Icon>
            内容管理
        </template>
        <MenuItem name="ArticleList"> 文章管理</MenuItem>
        <MenuItem name="CommentList">评论管理</MenuItem>
        <MenuItem name="1-3">举报管理</MenuItem>
        </Submenu>
        <Submenu name="2">
        <template slot="title">
            <Icon type="ios-people"></Icon>
            用户管理
        </template>
        <MenuItem name="2-1">新增用户</MenuItem>
        <MenuItem name="2-2">活跃用户</MenuItem>
        </Submenu>
        <Submenu name="3">
        <template slot="title">
            <Icon type="stats-bars"></Icon>
            统计分析
        </template>
        <MenuGroup title="使用">
            <MenuItem name="3-1">新增和启动</MenuItem>
            <MenuItem name="3-2">活跃分析</MenuItem>
            <MenuItem name="3-3">时段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
            <MenuItem name="3-4">用户留存</MenuItem>
            <MenuItem name="3-5">流失用户</MenuItem>
        </MenuGroup>
        </Submenu>
    </Menu>
</template>
<script>
export default {
    data () {
        return {
            msg: '',
            openName: this.$store.state.menuOpen,
            activeName: this.$route.name
        }
    },
    methods: {        
        routerName (name) {
           this.$router.push('/' + name)
         
        },
        activeSelect (name) {
            console.log(name)
        },
        grouping (val) {
            //console.log(val)
        }
    },
    watch: {
        '$route' (to) {          
           this.activeName = to.name;
        },
        activeName () {
           this.openName = this.$store.state.menuOpen;           
        }
    },  
    mounted () {
      
    }
   
}
</script>
<style lang="less" scoped>

</style>